<template>
  <div class="ht-form">
    <el-form :label-width="labelWidth" :model="modelValue" :rules="rules" ref="ruleFormRef" v-bind="formOptions">
      <el-row v-bind="corLayout">
        <template v-for="item in formItems" :key="item.label">
          <!-- 自定义内容 -->
          <el-col v-bind="item.colLayout" v-if="item.type == 'custom'">
            <slot :name="item.slotName"></slot>
          </el-col>
          <!-- 无内容但是需要col占位 -->
          <el-col v-bind="item.colLayout" v-else-if="item.type == 'placeholder'"></el-col>
          <!-- 表单内容 -->
          <el-col v-bind="item.colLayout" v-else>
            <el-form-item
              v-if="item.prop"
              :label="item.label"
              :prop="item.prop"
              :style="itemStyle"
              v-bind="item.formItem"
            >
              <!-- input -->
              <template v-if="item.type === 'input' || item.type === 'password'">
                <el-input
                  :placeholder="item.placeholder"
                  v-bind="item.otherOptions"
                  :show-password="item.type === 'password'"
                  :model-value="modelValue[`${item.field}`]"
                  @update:modelValue="handleValueChange($event, item.field)"
                />
              </template>
              <!-- select -->
              <template v-else-if="item.type === 'select'">
                <el-select
                  :placeholder="item.placeholder"
                  v-bind="item.otherOptions"
                  style="width: 100%"
                  :model-value="modelValue[`${item.field}`]"
                  @update:modelValue="handleValueChange($event, item.field)"
                >
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :value="option.value"
                    :label="option.label"
                  />
                </el-select>
              </template>
              <!--  datepicker-->
              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker
                  style="width: 100%"
                  v-bind="item.otherOptions"
                  :model-value="modelValue[`${item.field}`]"
                  @update:modelValue="handleValueChange($event, item.field)"
                ></el-date-picker>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElForm } from 'element-plus'

type Props = {
  modelValue: any
  labelWidth: string
  formItems: any[]
  itemStyle?: any
  rules: any
  corLayout?: any
  formOptions: any
  colLayout?: any
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({}),
  labelWidth: '',
  formItems: () => [],
  itemStyle: () => ({}),
  rules: () => ({}),
  corLayout: () => ({}),
  formOptions: () => ({}),
  colLayout: () => ({})
})

const emit = defineEmits(['update:modelValue'])

const handleValueChange = (value: any, field: any) => {
  emit('update:modelValue', { ...props.modelValue, [field]: value })
}

// 提供form组件ref实例
const ruleFormRef = ref<InstanceType<typeof ElForm> | null>(null)

defineExpose({
  ruleFormRef
})
</script>

<style scoped lang="less">
:deep(.el-form-item) {
  margin-bottom: 0;

  .el-form-item__label {
    color: #333;
  }
}
</style>
